<template>
  <div class="modle goods" v-show="show">
    <div class="tit"><b>精选商品</b></div>
    <div class="content">
      <div class="left">添加商品：</div>
      <div class="right">
        <div class="add flex-center" @click="selectGoods()">
          <i class="el-icon-plus"></i>
        </div>
        <div class="goods_box">
          <div class="good" v-for="(item, index) in goodsInfo" :key="index">
            <div class="img_box" @click="selectGoods(item.id, index)">
              <img class="img" :src="item.img" />
              <div class="change flex-center">更换商品</div>
            </div>
            <div class="name flex-middle">{{ item.name }}</div>
            <div class="remove flex-center" @click="remove(index)">移除</div>
            <div
              class="sort flex-column"
              :style="
                index == 0 || index == goodsInfo.length - 1
                  ? 'justify-content:center;'
                  : ''
              "
            >
              <img
                v-show="index != 0"
                @click="Move(index, 'up')"
                src="@/assets/images/shop_up.png"
              />
              <img
                v-show="index != goodsInfo.length - 1"
                @click="Move(index, 'down')"
                src="@/assets/images/shop_down.png"
              />
            </div>
          </div>
        </div>
        <div
          v-show="goodsInfo.length > 5"
          class="add flex-center"
          @click="selectGoods()"
        >
          <i class="el-icon-plus"></i>
        </div>
      </div>
    </div>
    <div class="flex-center">
      <div class="submit flex-center" @click="submit()">保存</div>
    </div>
  </div>
</template>

<script>
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { goodsSelect_save, goodsSelect_index } from "@/api/shop/shop";

export default {
  props: ["show"],
  data() {
    return {
      goodsInfo: [], // img:'',id:'',name:'',
    };
  },
  created() {
    let params = Object.assign(
      {
        sign: Md5(
          objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
        ),
      },
      apiUrl().name
    );
    goodsSelect_index(params).then((res) => {
      if (res.errcode == 0) {
        let array = res.data.list.map((item) => {
          return {
            img: item.img,
            id: item.goods_id,
            name: item.name,
          };
        });
        this.goodsInfo = array;
      } else {
        this.$message.error(res.errmsg);
      }
    });
  },
  methods: {
    selectGoods(id, index) {
      let radio = id ? true : false;
      this.$emit("selectGoods", { id, index, ref: "refGoods", isRadio: radio });
    },
    getSelectedGood(index, info) {
      if (JSON.stringify(index)) {
        //更换商品
        // this.goodsInfo[index] = {
        //   img: info.pic,
        //   id: info.id,
        //   name: info.name,
        // };
        this.goodsInfo[index].img = info.pic;
        this.goodsInfo[index].id = info.id;
        this.goodsInfo[index].name = info.name;
      } else {
        //添加商品
        let newgoods = info.map((item) => {
          return {
            img: item.pic,
            id: item.id,
            name: item.name,
          };
        });
        let allgoods = this.goodsInfo.concat(newgoods);
        let filterGoods = [];
        for (let i = 0; i < allgoods.length; i++) {
          let flag = true;
          for (let y = i + 1; y < allgoods.length; y++) {
            if (allgoods[i].id == allgoods[y].id) {
              flag = false;
              break;
            }
          }
          if (flag) {
            filterGoods.push(allgoods[i]);
          }
        }
        this.goodsInfo = filterGoods;
      }
    },
    remove(index) {
      this.$confirm("是否移除该商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.goodsInfo.splice(index, 1);
        })
        .catch(() => {});
    },
    //移动排序
    Move(index, type) {
      let toIndex;
      type == "up" ? (toIndex = index - 1) : (toIndex = index + 1);
      let arr_temp = [].concat(this.goodsInfo); //创建一个新的临时数组，用以操作后不变更原数组
      arr_temp.splice(toIndex, 0, arr_temp.splice(index, 1)[0]); //在toIndex位置插入从index位置截取的元素
      this.goodsInfo = arr_temp;
    },
    submit() {
      this.listLoading = true;
      let data = this.goodsInfo.map((item, index) => {
        return {
          goods_id: item.id,
          ordid: index + 1,
        };
      });
      data = JSON.stringify(data);
      let params = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { list: data })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { list: data }
      );
      goodsSelect_save(params).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods {
  font-size: 14px;
  .content {
    display: flex;
    background: #fff;
    min-width: 500px;
    padding: 30px 16px;
    .left {
      color: #616161;
      font-size: 14px;
      margin-right: 10px;
    }
    .right {
      .goods_box {
        margin: 24px 0;
        .good {
          display: flex;
          .img_box {
            position: relative;
            box-sizing: border-box;
            width: 60px;
            height: 60px;
            .img {
              border: 1px solid #19b098;
              width: 60px;
              height: 60px;
            }
            .change {
              width: 100%;
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              color: #fff;
              background: #19b098;
              font-size: 10px;
              padding: 1px 0;
            }
          }
          .name {
            width: 154px;
            height: 60px;
            background: #e1f3f0;
            border-top: 1px solid #19b098;
            border-bottom: 1px solid #19b098;
            padding-left: 20px;
            color: #404040;
            font-size: 14px;
          }
          .remove {
            width: 26px;
            height: 60px;
            background: #d81e1e;
            color: #fff;
            writing-mode: vertical-lr;
            cursor: pointer;
          }
          .sort {
            justify-content: space-between;
            margin-left: 20px;
          }
          & + .good {
            margin-top: 20px;
          }
        }
      }
      .add {
        width: 60px;
        height: 60px;
        border: 2px solid #d3d3d3;
        color: #d3d3d3;
        font-size: 20px;
      }
    }
  }
}
</style>